<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="./css/reset.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script type="text/javascript" src="./js/validate.js"></script>

	<style>
		#login-container .login-from {
			width: 400px;
			margin: 50px auto;
		}

		#login-container .login-from .title {
			margin-top: 20px;
			margin-bottom: 20px;
			font-weight: bold;
			text-align: center;
		}

		#login-container .login-from .submitBtn {
			width: 100%;
		}

		#login-container .login-from .el-form-item__content {
			position: relative;
		}

		#login-container .login-from .el-form-item__content .el-input__inner {
			padding-left: 32px;
		}

		#login-container .login-from .el-form-item__content .icon {
			width: 1.5rem;
			height: 1.5rem;
			position: absolute;
			left: 5px;
			top: 8px;
			z-index: 1;
			color: red;
		}

		#login-container img {
			display: block;
			margin: 0px auto;
			margin-top: 10px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div id='login-container'>
			<img src="./logo.png" style="margin-top:50px;"/>
			<el-form :model="loginFrom" status-icon :rules="loginRules" ref="loginFrom" class="demo-ruleForm login-from">
				<h3 class="title">移动执法电子证据采集系统</h3>
				<el-form-item prop="userName">
					<el-input v-model="loginFrom.userName" auto-complete="off" placeholder="请输入用户名" class="input-style"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="loginFrom.password" auto-complete="off" placeholder="请输入密码" prefix-icon=""></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleLogin" class="submitBtn">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

	<script>
		new Vue({
			el: '#app',
			data() {
				const validateUsername = (rule, value, callback) => {
					if (!value) return callback('用户名不能为空')
					if (!isvalidUsername(value)) {
						callback(new Error('请输入正确的用户名'))
					} else {
						callback()
					}
				}
				const validatePassword = (rule, value, callback) => {
					if (!value) return callback('密码不能为空')
					if (value.length < 6) {
						callback(new Error('密码不能小于6位'))
					} else {
						callback()
					}
				}
				return {
					loginFrom: {
						handleLogin() {
							console.log(1)
						}
					},
					loginRules: {
						userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
						password: [{ required: true, trigger: 'blur', validator: validatePassword }]

					}
				}
			},
			methods: {
				handleLogin() {
					this.$refs.loginFrom.validate((valid) => {
						if (valid) {
							// window.location.href="./deviceparamet.html"
							window.location.href = "./devicestatus.html"
						} else {
							console.log('error submit!!');
							return false;
						}
					});

				}
			}
		})
	</script>
	<script src="./js/nwShowTools.js"></script>
</body>

</html>